import React from 'react'

import {message, Tabs,Button,Spin} from 'antd';
const { TabPane } = Tabs;

import {WeaLocaleProvider, WeaTools,WeaInput,WeaCheckbox} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

import './css'

export default class PortalTsShow extends React.Component{

    state = {
        themeTss: [],
        searchText:'',
        isOrder: 0,
        loading: false,
    }

    componentWillMount(){
        this.findPortalTsShow()
    }

    componentDidUpdate(){
        let height = $(".portalTsShow").height() - $(".portalTsShow .ant-tabs-bar").height()
        if($(".portalTsShow .ant-tabs-bar").css('margin-bottom')){
            height -= parseInt($(".portalTsShow .ant-tabs-bar").css('margin-bottom').split('px'))
        }
        if($(".portalTsShow .ant-tabs-bar").css('margin-top')){
            height -= parseInt($(".portalTsShow .ant-tabs-bar").css('margin-top').split('px'))
        }
        $(".portalTsShow .items").height(height)
    }

    findPortalTsShow = (newState)=>{
        let {searchText,isOrder} = this.state
        if(newState){
            searchText = newState.searchText
            isOrder =  newState.isOrder
        }
        const params = {searchText:searchText,isOrder:isOrder}
        this.setState({loading: true})
        WeaTools.callApi('/api/portalTsShow/findPortalTsShow', 'GET', params).then((result) => {
            const {data} = result
            if(data){
                this.setState({themeTss:data,loading:false})
            }

        })
    }

    themeOnClick = (item)=>{
        const {id,doc_id} = item
        if(doc_id && doc_id!=''){
            window.open(item.doc.docsubject.link,'_blank')
            WeaTools.callApi('/api/portalTsShow/visitPortalTsTheme', 'GET', {id:id}).then((result) => {
                this.findPortalTsShow()
            })
        }else{
            message.error(getLabel(514669 , '该主题未上传文档！'), 3);
        }

    }


    handerSearchInputOnKeyDown = (e)=>{
        if (e.keyCode == 13) {
            this.handerSearchButtonOnClick();
        }
    }

    handerSearchButtonOnClick = ()=>{
        this.findPortalTsShow()
    }

    handlerOrderOnClick = (value)=>{
        const {searchText} = this.state
        this.setState({isOrder:value})
        this.findPortalTsShow({searchText,isOrder: value})
    }

    render(){

        const {themeTss,searchText,isOrder,loading} = this.state

        const operations = (
            <div>
                <div className='order'>
                    <div className='order-title'>
                      {getLabel(514683, '按访问量排序')}
                    </div>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@6f8891`}
                        value={isOrder}
                        display="switch"
                        style={{display: 'inline'}}
                        onChange={(value)=>{this.handlerOrderOnClick(value)}}
                    />
                </div>
                <div className='search'>
                    <input className='search-input' type="text" value={searchText} onChange={(e)=>{this.setState({searchText: e.target.value})}} onKeyDown={this.handerSearchInputOnKeyDown}/>
                    <div className='search-button ' onClick={this.handerSearchButtonOnClick}>
                        {getLabel(510822, '搜索')}
                    </div>
                </div>
            </div>
        )

        return (
            <div className='portalTsShow'>
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@3b8f7n`} defaultActiveKey="0" tabBarExtraContent={operations} >

                    <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@qabvim`} tab={getLabel(344, '主题')} key="0">

                        <div className='items'>
                            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@tfoz59`} spinning={loading}>
                                <div className="items-content">
                                    {
                                        themeTss.map((item,index)=>{
                                            if(item.type == '0'){
                                                return (
                                                    <div className='item'>
                                                        <div className="item-content" onClick={()=>{this.themeOnClick(item)}}>
                                                            <img className='item-icon' src={item.doc.images[0]}/>
                                                            <div className='item-name'>{item.doc.docsubject.name}</div>
                                                            <div className='item-visit-count'>访问量:{item.visit_count}</div>
                                                        </div>
                                                    </div>
                                                )
                                            }

                                        })
                                    }
                                </div>
                            </Spin>
                        </div>

                    </TabPane>
                    <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@6rvhuy`} tab={getLabel(19408, '元素')} key="1">
                        <div className='items'>
                            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@k8r3dh`} spinning={loading}>
                                <div className="items-content">
                                    {
                                        themeTss.map((item,index)=>{
                                            if(item.type == '1'){
                                                return (
                                                    <div className='item'>
                                                        <div className="item-content" onClick={()=>{this.themeOnClick(item)}}>
                                                            <img className='item-icon' src={item.doc.images[0]}/>
                                                            <div className='item-name'>{item.doc.docsubject.name}</div>
                                                            <div className='item-visit-count'>访问量:{item.visit_count}</div>
                                                        </div>
                                                    </div>
                                                )
                                            }

                                        })
                                    }
                                </div>
                            </Spin>
                        </div>
                    </TabPane>
                    <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@bcoqf6`} tab={getLabel(514701, '登录页')} key="2">
                        <div className='items'>
                            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@90lmz1`} spinning={loading}>
                                <div className="items-content">
                                    {
                                        themeTss.map((item,index)=>{
                                            if(item.type == '2'){
                                                return (
                                                    <div className='item'>
                                                        <div className="item-content" onClick={()=>{this.themeOnClick(item)}}>
                                                            <img className='item-icon' src={item.doc.images[0]}/>
                                                            <div className='item-name'>{item.doc.docsubject.name}</div>
                                                            <div className='item-visit-count'>访问量:{item.visit_count}</div>
                                                        </div>
                                                    </div>
                                                )
                                            }

                                        })
                                    }
                                </div>
                            </Spin>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}